<template>
	<view v-if="detail" class="to-pay-order">
		<u-cell title="订单号" :value="detail.sn"></u-cell>
		<u-cell title="姓名" :value="detail.senderName" icon="account" :border="false">
			<u-icon slot='right-icon' name="phone" color="#3c9cff" size="40rpx" @click="tapCall"></u-icon>
		</u-cell>
		<u-cell title="地址" :value="detail.senderProvince+detail.senderCity+detail.senderRegion+detail.senderDetailAddress" icon="map" :border="false"></u-cell>
		<u-cell-group>
			<u-cell title="订单类型" :value="orderTypeStr()" :border="false"></u-cell>
			<u-cell title="物品" :value="detail.goodsName" :border="false"></u-cell>
			<u-cell title="件数" :value="detail.goodsNumber+'件'" :border="false"></u-cell>
			<u-cell title="备注" :value="detail.remark" :border="false" v-if="detail.remark"></u-cell>
			
			<u-cell title="附件" :border="false">
				<u-album slot='right-icon' :urls="urls" rowCount="5" singleSize="50" multipleSize="50"></u-album>
			</u-cell>
			
		</u-cell-group>
		<u-cell-group v-if="detail.handlerName">
			<u-cell title="接单人" :border="false" class="mt32">
				<view class="t28 flex-between" slot='right-icon'>
					<u-avatar :src="detail.handlerHeader" size="48rpx"></u-avatar>
					<text class="mlr16">{{detail.handlerName}}({{detail.handlerType}})</text>
					<u-icon name="phone" color="#2979ff"  size="48rpx" @click="tapCall(detail.handlerPhone)"></u-icon>
				</view>
			</u-cell>
		</u-cell-group>
		
		

		<u-divider text="合计" class="mt64"></u-divider>
		<u-cell :title="detail.orderType<20?'搬运费':'物流费'" :value="detail.amountGoods + '元'" :border="false"></u-cell>
		<u-cell title="增值服务费" :value="detail.amountPack + '元'" :border="false" v-if="detail.amountPack"></u-cell>
		<u-cell title="保险费" :value="detail.amountSafe + '元'" :border="false" v-if="detail.amountSafe"></u-cell>
		<u-cell :border="false" title="总计" :value="detail.amountTotal + '元'" :arrow="false"></u-cell>
		<!-- <template v-if="detail.logisticsTraces">
			<u-divider text="快递信息"></u-divider>
			<view class="logisticsTraces">
				<u-steps dot direction="column">
					<u-steps-item v-for="(item, index) in detail.logisticsTraces" :key="index" :title="item.AcceptStation" :desc="item.AcceptTime"></u-steps-item>
				</u-steps>
			</view>
		</template> -->
		<view v-if="!detail.paymentTime" class="submit safe-area-inset-bottom">
			<u-button type="error" @click="payOrder">支付</u-button>
		</view>
		<view v-if="detail.status == 2 && !detail.receiveTime" class="submit safe-area-inset-bottom">
			<u-button type="success" @click="deliveryOrder">确认收货</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: undefined,
				detail: undefined,
				 urls: [
					 'https://cdn.uviewui.com/uview/album/1.jpg',
				 ],
			}
		},
		created() {

		},
		mounted() {

		},
		onReady() {

		},
		onLoad(e) {
			this.id=e.id
		},
		onShow() {
			this._orderDetail(this.id)
		},
		methods: {
			async _orderDetail(orderId) {
				const res = await this.$wxapi.queryOrder(this.token, orderId)
				if (res.code != 0) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					uni.navigateBack()
					return
				}
				this.detail = res.data
			},
			async payOrder() {
				this._payOrder()
			},
			async _payOrder() {
				const res = await this.$wxapi.payOrder(this.token, this.detail.id)
				if (res.code == 0) {
					this.goUrl("../order/paysuccess")
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			async deliveryOrder() {
				uni.showModal({
					title: '请确认',
					content: '确定要确认收货吗？',
					success: res => {
						if (res.confirm) {
							this._deliveryOrder()
						}
					}
				})
			},
			async _deliveryOrder() {
				const res = await this.$wxapi.deliveryOrder(this.token, this.detail.id)
				if (res.code == 0) {
					uni.showToast({
						title: '已收到货',
					})
					this._orderDetail(this.detail.id)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			tapCall(value) {
				uni.makePhoneCall({
					phoneNumber: value
				})
			},
			orderTypeStr() {
				switch (this.detail.orderType) {
					case 11:
						return '搬运服务-参展'
						break;
					case 12:
						return '搬运服务-撤展'
						break;
					case 21:
						return '代收代发-参展'
						break;
					case 22:
						return '代收代发-撤展'
						break;
					case 31:
						return '装卸车服务-参展'
						break;
					case 32:
						return '装卸车服务-撤展'
						break;
					default:
						return ' '
						break;
				}

			},
			goUrl(url) {
				if (url) {
					uni.navigateTo({
						url
					})
				}
			},
		}
	}
</script>
<style scoped lang="scss">
	.to-pay-order {
		padding-bottom: 100rpx;

		.shop-section {
			margin-top: 32rpx;
		}
	}

	.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;

		.top {
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				.store {
					margin: 0 10rpx;
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.right {
				color: $u-warning-dark;
			}
		}

		.item {
			display: flex;
			margin: 20rpx 0 0;

			.left {
				margin-right: 20rpx;

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
			}

			.content {
				flex: 1;

				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}

				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}

				.delivery-time {
					color: #e5d001;
					font-size: 24rpx;
				}
			}

			.right {
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;

				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}

				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}

		.total {
			margin-top: 20rpx;
			text-align: right;
			font-size: 24rpx;

			.total-price {
				font-size: 32rpx;
			}
		}

		.bottom {
			display: flex;
			margin-top: 40rpx;
			padding: 0 10rpx;
			justify-content: space-between;
			align-items: center;

			.btn {
				line-height: 52rpx;
				width: 160rpx;
				border-radius: 26rpx;
				border: 2rpx solid $u-border-color;
				font-size: 26rpx;
				text-align: center;
				color: $u-info-dark;
			}

			.evaluate {
				color: $u-warning-dark;
				border-color: $u-warning-dark;
			}
		}
	}

	.remark {
		padding: 32rpx;
	}

	.submit {
		position: fixed;
		width: 100vw;
		left: 0;
		bottom: 0;
		z-index: 9;
	}

	.logisticsTraces {
		padding: 32rpx;
	}

	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}


</style>